<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>微信聊天室</title>
        <link rel="stylesheet" href="styles/normalize.css">
        <link rel="stylesheet" href="styles/reset.css">
        <link rel="stylesheet" href="styles/chart.css">
    </head>
    <body>
        <div id="login-container">
            <div class="login-title">微信聊天室</div>
            <div class="login-user-icon">
                <img src="images/login.png" alt="">
            </div>
            <div>
                <input type="text" id="username" class="login-item login-username" placeholder="请输入聊天昵称">
            </div>
            <div>
                <input type="button" id="login" class="login-item login-button" value="登录">
            </div>
        </div>
        <script>
            //为login按钮绑定事件
            let btnLogin=document.getElementById('login');
            btnLogin.onclick=()=>{
                //获取name与avatar，跳转到chart.html
                let name=document.getElementById('username').value;
                let avatar=Math.floor(Math.random()*99)+'.jpg';
                location=`chart.html?name=${name}&avatar=${avatar}`;
            }
        </script>
    </body>
</html>
